<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式操作</title>
    <script src="../vue.js"></script>
    <style>
         .basic {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        text-align: center;
        line-height: 200px;
        font-size: 20px;
      }

      .happy {
        background-color: palevioletred;
        border: 2px solid orange;
      }

      .normal {
        background-color: skyblue;
        border: 2px solid lightcoral;
      }

      .sad {
        background-color: green;
        border: 2px solid gray;
      }

      .jack1 {
        background-color: tomato;
      }

      .jack2 {
        font-size: 30px;
        color: red;
      }

      .jack3 {
        border-radius: 10%;
      }

    </style>
</head>
<body>
    <div id="app">
        <!-- 绑定class样式 -->
        <!-- 绑定class样式 字符串写法 -->
        <div class="basic" :class="mood" @click="change">{{name}}</div>
       
       
        <!-- 数组写法 -->
        <div class="basic" :class="classArr" @click="change">{{name}}</div>
        
        <!-- 对象写法 -->
        <div class="basic" :class="classObj" @click="change">{{name}}</div>
        
        
        <!-- 行内样式 -->
        <div class="basic" :class="styleObj" @click="change">{{name}}</div>
    </div>
    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                name:"Tom",
                //样式里面存在的
                mood:"sad",
                classArr:["jack1","jack2","jack3"],
                classObj:{ 
                    jack1:true,
                    jack2:false,
                    jack3:false,
                },
                styleObj:{
                    fontSize:"30px",
                },
            },
            methods:{
                change(){
                    const arr=["happy","sad","normai"];
                    const index=Math.floor(Math.random()*3);
                    this.mood=arr[index];
                }
            }
        });
    </script>
</body>
</html>